<template>
  <u-popup
    :show="show"
    @close="close"
    @open="open"
    overlayOpacity="0.75"
    zoom
    mode="center"
    bgColor="transparent"
    safeAreaInsetBottom
    safeAreaInsetTop
  >
    <view class="swiper-container" :style="`height: ${clientHeight}px`">
      <view class="close-btn" @click="close">
        <image src="@/assets/image-back.svg"></image>
      </view>
      <view class="image-num">
        {{ currentImg + 1 || 1 }}/{{ imgList?.length || 1 }}
      </view>
      <view class="download-btn">
        <view
          class="item"
          @click="setCurrent(index)"
          :class="{ active: currentImg === index }"
          v-for="(item, index) in imgList"
        ></view>
      </view>
      <swiper
        class="swiper"
        :style="`height: ${clientHeight}px`"
        :indicator-dots="false"
        :circular="true"
        :autoplay="false"
        :current="currentImg"
        @change="swiperChange"
      >
        <swiper-item
          class="swiper-item"
          v-for="(item, index) in imgList"
          :key="index"
        >
          <!-- 条件编译 h5 -->
          <!-- #ifdef H5 -->
          <ngLazeImage
            :style="`height: ${clientHeight}px`"
            v-if="currentImg == index"
            :data-src="`${Verify ? item : item + '?draw=no'}`"
            class="slide-image"
            mode="aspectFit"
          ></ngLazeImage>
          <!-- #endif -->
          <!-- #ifdef APP || APP-PLUS -->
          <ngLazeImage
            :style="`height: ${clientHeight}px`"
            v-if="currentImg == index"
            :data-src="`${Verify ? item : item + '?draw=no'}`"
            class="slide-image"
            mode="aspectFit"
            @longpress.stop="longPress"
          ></ngLazeImage>
          <!-- #endif -->
        </swiper-item>
      </swiper>
    </view>
  </u-popup>
</template>

<script setup lang="ts">
import { ref, nextTick, watch } from "vue";

const currentImg = ref(0);
const imgList = ref([]);
const clientHeight = ref(0);

const emit = defineEmits(["open", "close", "update:currentImg"]);
const show = ref(false);

const open = () => {
  show.value = true;
  emit("open");
};

const close = () => {
  show.value = false;
  emit("close");
};
const Verify = ref(false);
const setIsVerify = (isVerify: boolean) => {
  Verify.value = isVerify;
};
const swiperChange = (e: any) => {
  currentImg.value = e.detail.current;
  emit("update:currentImg", e.detail.current);
};

const setImages = (images: any) => {
  imgList.value = images;
};

const setCurrent = (index: any) => {
  nextTick(() => {
    currentImg.value = index;
  });
};

// app 长按保存图片
const longPress = () => {
  uni.showActionSheet({
    itemList: ["保存图片"],
    success: (data) => {
      if (data.tapIndex === 0) {
        uni.downloadFile({
          url: imgList.value[currentImg.value],
          success: (res) => {
            if (res.statusCode === 200) {
              uni.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: () => {
                  uni.showToast({
                    title: "保存成功",
                    icon: "success",
                  });
                },
                fail: (err) => {
                  uni.showToast({
                    title: "保存失败",
                    icon: "none",
                  });
                },
              });
            }
          },
        });
      }
    },
  });
};

watch(
  () => show.value,
  (val) => {
    if (val) {
      // 获取屏幕可视区域高度
      uni.getSystemInfo({
        success: (res) => {
          clientHeight.value = res.windowHeight;
        },
      });
    }
  }
);

defineExpose({
  open,
  close,
  setImages,
  setCurrent,
  setIsVerify,
});
</script>

<style scoped lang="scss">
.swiper-container {
  position: relative;
  box-sizing: border-box;
  width: calc(100vw);

  .close-btn {
    /* 适配安全区 */
    position: absolute;
    top: calc(var(--window-top) + 40upx);
    left: 40upx;
    z-index: 999;
    width: 60rpx;
    height: 60rpx;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .image-num {
    /* 适配安全区 */
    position: absolute;
    top: calc(var(--window-top) + 40upx);
    right: 40upx;
    z-index: 999;
    background: #000000;
    padding: 13rpx 25rpx;
    color: #ffffff;
    border-radius: 60rpx;
    display: flex;
    font-size: 24rpx;
    justify-content: center;
    align-items: center;
  }
  .download-btn {
    /* 适配安全区 */
    position: absolute;
    bottom: calc(var(--window-top) + 40upx);
    width: 100%;
    left: 0px;
    z-index: 999;
    color: #ffffff;
    border-radius: 60rpx;
    display: flex;
    gap: 5rpx;
    font-size: 24rpx;
    justify-content: center;
    align-items: center;
    .active {
      opacity: 1 !important;
    }
    .item {
      background: #ffffff;
      opacity: 0.5;
      flex: 1;

      height: 6rpx;
      border-radius: 10rpx;
      z-index: 999;
    }
  }

  .swiper {
    box-sizing: border-box;
    width: calc(100vw);
    height: 100%;
    :deep(.ng-image_main) {
      box-sizing: border-box;
      width: calc(100vw);
      height: 100%;
    }
  }
}
</style>
